<template>
	<div class="loginBg">
		<div class="login_left">
			<el-carousel trigger="click" ref="carousel" :autoplay="false" indicator-position="outside" :loop="false"
				:indicator-text="indicatorText">
				<el-carousel-item v-for="(page, index) in pages" :key="index">
					<div class="contant">
						<div v-for="(item, index) in page" :key="index" class="contant_box">
							<div class="contant_box_item" id="box">
								<img class="img" :src="item.src" alt="" />
								<p style="">用安软件</p>
							</div>
						</div>
					</div>
				</el-carousel-item>
			</el-carousel>

			<!-- <div class="login_left_button">
        <button type="text" v-for="(item, index) in pages.length" :key="index" :class="{ active: activeIndex === index }"
          @mouseenter="handleMouseEnter(index)" @click="goToPage(index)">
          {{ item }}
        </button>
      </div> -->
		</div>

		<div class="login_right" v-if="!selectCompany">
			<div class="login_righ_title">
				<img src="../assets/images/logo.png" />
				<h1>用安数智中台</h1>
				<p>浙江用安软件・用友全国十强</p>
			</div>
			<div>
				<el-form ref="loginFormNew" :model="loginForm" :rules="loginRulesNew" class="login-form">
					<el-form-item prop="login_name">
						<el-input v-model="loginForm.login_name" type="text" auto-complete="off" placeholder="请输入账号">
							<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input v-model="loginForm.password" @keyup.enter.native="handleLogin" show-password
							type="password" auto-complete="off" placeholder="请输入密码">
							<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
						</el-input>
					</el-form-item>
					<el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">记住密码</el-checkbox>
					<el-checkbox v-model="loginForm.automaticLogin" style="margin: 0px 0px 25px 20px">自动登录</el-checkbox>
					<!-- <a class="forgetPwd">忘记密码？</a> -->
					<el-form-item style="width: 100%">
						<el-button :loading="loading" size="medium" type="primary" style="width: 100%"
							@click.native.prevent="handleLogin">
							<span v-if="!loading">登 录</span>
							<span v-else>登 录 中...</span>
						</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>

		<div class="selectContainer" v-if="selectCompany">
			<div class="backLogin" @click="backLogin">
				<i class="el-icon-arrow-left"></i> 返回
			</div>
			<div class="organization">
				<h2>请选择您本次登录的组织</h2>
				<div class="orgBtnGroup">
					<el-button v-for="item in companyList" :key="item.companyID" :loading="item.isLoading"
						class="comBtn" @click.native.prevent="handleSelectCompany(item)">
						<i class="el-icon-office-building" style="position: absolute; left: 10px"></i>
						<span v-if="!item.isLoading">{{ item.companyName }}</span>
						<span v-else style="color: #0f3dc2">{{ item.companyName }}</span>
						<i class="el-icon-right" style="position: absolute; right: 10px"></i>
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		encrypt,
		decrypt
	} from "@/utils/jsencrypt";
	import Cookies from "js-cookie";
	import {
		OrganGetUserCompany
	} from "@/api/apis/organization.js";
	import {
		setCompanyId
	} from "@/utils/auth.js";
	import {
		OtherGetBillList,
		OtherSaveData,
		DelData,
	} from "@/api/apis/tripartiteLink";

	export default {
		data() {
			return {
				currentIndex: 0, // 当前显示的索引位
				activeIndex: 0,
				pageModel: {
					page: "1",
					limit: "20",
					SequenceName: "createDate",
					Sequence: "descending",
				},

				pageSize: 12, // 每页显示的数量
				pages: [], // 分页后的数据
				dataList: [
					// 所有数据
					{
						src: require("@/assets/login/login1.png")
					},
					{
						src: require("@/assets/login/login2.png")
					},
					{
						src: require("@/assets/login/login3.png")
					},
					{
						src: require("@/assets/login/login1.png")
					},
					{
						src: require("@/assets/login/login1.png")
					},
					{
						src: require("@/assets/login/login2.png")
					},
					{
						src: require("@/assets/login/login3.png")
					},
					{
						src: require("@/assets/login/login1.png")
					},
					{
						src: require("@/assets/login/login1.png")
					},
					{
						src: require("@/assets/login/login2.png")
					},
					{
						src: require("@/assets/login/login3.png")
					},
					{
						src: require("@/assets/login/login3.png")
					},
					{
						src: require("@/assets/login/login3.png")
					},
					{
						src: require("@/assets/login/login3.png")
					},
				],
				loginForm: {
					login_name: "", //账号
					password: "", //密码
					rememberMe: false, //记住密码
					automaticLogin: false, //自动登录
					code: "",
					uuid: "",
				},
				loginRulesNew: {
					login_name: [{
						required: true,
						trigger: "blur",
						message: "请输入账号",
					}, ],
					password: [{
						required: true,
						trigger: "blur",
						message: "请输入密码",
					}, ],
				},
				loading: false,
				selectCompany: false,
				companyList: [], //公司账套
				redirect: undefined,
				interval: null,
			};
		},
		computed: {
			indicatorText() {
				// const currentPage = this.$refs.carousel.currentPage + 1;
				// const totalPage = this.$refs.carousel.items.length;
				// return `${currentPage}/${totalPage}`;
			},
		},
		mounted() {
			this.getCookie();
			this.generatePages();
			// this.getLinkList()
		},
		watch: {
			$route: {
				handler: function(route) {
					this.redirect = route.query && route.query.redirect;
				},
				immediate: true,
			},
		},
		methods: {
			// goToPage(index) {
			//   this.activeIndex = index;
			//   this.currentIndex = index + 1; // 修改 currentIndex 的值
			//   this.$refs.carousel.goTo(index); // 调用走马灯组件的 goTo 方法进行翻页
			// },
			// handleMouseEnter(index) {
			//   this.activeIndex = index; // 鼠标移入时修改 activeIndex 的值
			// },
			generatePages() {
				this.pages = [];
				let start = 0;
				while (start < this.dataList.length) {
					this.pages.push(this.dataList.slice(start, start + this.pageSize));
					start += this.pageSize;
				}
			},
			// 获取三方Link列表
			async getLinkList() {
				let params = {
					...this.pageModel
				};
				let res = await OtherGetBillList(params);

				if (res.code == 1) {
					this.linkList = res.data[1];
				}
			},
			// 获取cookie
			getCookie() {
				const login_name = Cookies.get("login_name");
				const password = Cookies.get("password");
				const rememberMe = Cookies.get("rememberMe");
				const automaticLogin = Cookies.get("automaticLogin");
				this.loginForm = {
					login_name: login_name === undefined ? this.loginForm.login_name : login_name,
					password: password === undefined ? this.loginForm.password : decrypt(password),
					rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
					automaticLogin: automaticLogin === undefined ? false : Boolean(automaticLogin),
				};
				if (
					this.loginForm.automaticLogin === true &&
					this.loginForm.password &&
					this.loginForm.login_name
				) {
					this.$nextTick(() => {
						this.handleLogin();
					});
				}
			},
			// 登录按钮被点击
			handleLogin() {
				this.$refs.loginFormNew.validate((valid) => {
					if (valid) {
						this.loading = true;
						if (this.loginForm.rememberMe) {
							Cookies.set("login_name", this.loginForm.login_name, {
								expires: 30,
							});
							Cookies.set("password", encrypt(this.loginForm.password), {
								expires: 30,
							});
							Cookies.set("rememberMe", this.loginForm.rememberMe, {
								expires: 30,
							});
							Cookies.set("automaticLogin", this.loginForm.automaticLogin, {
								expires: 30,
							});
						} else {
							Cookies.remove("login_name");
							Cookies.remove("password");
							Cookies.remove("rememberMe");
							Cookies.remove("automaticLogin");
						}

						this.$store
							.dispatch("Login", this.loginForm)
							.then(() => {
								this.$router
									.push({
										path: this.redirect || "/",
									})
									.catch(() => {});
							})
							.catch(() => {
								this.loading = false;
							});
					}
				});
			},
			// 获取公司列表数据
			async getCompanyList() {
				let params = {
					login_name: this.loginForm.login_name,
					password: this.loginForm.password,
				};
				let res = await OrganGetUserCompany(params);
				if (res.code == 1) {
					res.data[0].forEach((element) => {
						element.isLoading = false;
					});
					// 如果只存在一个公司 直接跳转到首页
					if (res.data[0].length == 1) {
						this.handleSelectCompany(res.data[0][0]);
					} else {
						this.companyList = res.data[0];
						this.selectCompany = true;
					}
				}
			},
			// 当前选择的组织
			handleSelectCompany(item) {
				item.isLoading = true;
				setCompanyId(item.companyID);
				this.$router
					.push({
						path: this.redirect || "/",
					})
					.catch(() => {});
			},
			// 返回上一级
			backLogin() {
				this.selectCompany = false;
				this.loading = false;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.loginBg {
		position: relative;
		background-color: #efefef;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		.login_left {
			flex: 1;
			height: 100%;

			::v-deep .el-carousel__container {
				height: 100vh;
			}

			#box:hover {
				border: 1px solid #20b1e6;
				cursor: pointer;
			}

			.contant {
				display: flex;
				height: 100%;
				flex-wrap: wrap;
				align-items: center;
				align-content: center;
				text-align: -webkit-center;

				.contant_box {
					width: 25%;
					height: 130px;

					.contant_box_item {
						width: 180px;
						border-radius: 10px;
						padding-bottom: 20px;
						display: flex;
						flex-direction: column;
						align-content: center;
						align-items: center;
						justify-content: space-between;
					}

					img {
						width: 90px;
						height: 90px;
						display: inline-block;
					}

					p {
						// width: 46%;
						font-size: 14px;
						font-family: PingFangSC;
						color: #666666;
					}
				}
			}

			&_button {
				position: absolute;
				bottom: 100px;
				right: 30%;
				z-index: 100;

				button {
					border: none;
					padding: 8px 15px;
					cursor: pointer;
				}

				button:hover {
					background-color: blue !important;
				}

				button.active {
					background-color: #ad201c !important;
				}
			}
		}

		.login_right {
			width: 28%;
			height: 100%;
			background-color: #ffffff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.login_righ_title {
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;

				h1 {
					width: 450px;
					height: 50px;
					font-size: 35px;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #ad201c;
					line-height: 50px;
					margin-top: 40px;
				}

				img {
					width: 220px;
				}

				p {
					width: 100%;
					height: 22px;
					font-size: 18px;
					font-family: PingFangSC;
					color: #666666;
					line-height: 22px;
					margin: 30px;
				}
			}

			.login-form {
				::v-deep .el-form-item {
					width: 300px;
					border-radius: 4px;
					border: 1px solid #d0d3d7;
					margin-bottom: 20px;
				}

				::v-deep .el-form-item__content .el-input__icon {
					line-height: 44px;
					font-size: 17px;
				}

				::v-deep .el-input__inner {
					height: 44px;
					font-size: 17px;
					line-height: 44px;
				}

				::v-deep.el-checkbox__input.is-checked .el-checkbox__inner {
					background-color: #b02b27;
					border-color: #606266;
				}

				::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
					color: #606266;
				}

				::v-deep .el-button--medium {
					background-color: #b02b27;
					border-color: #b02b27;
					font-size: 18px;
					height: 44px;
				}

				.input-icon {
					height: 44px;
					width: 14px;
					margin-left: 5px;
				}
			}
		}
	}

	.selectContainer .el-button:hover {
		background: #ffffff;
		border-color: #0f3dc2;
		color: #0f3dc2;
	}

	.selectfocus {
		background: #0f3dc2;
		border-color: #0f3dc2;
		color: #fff;
	}

	.el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #0f3dc2 !important;
		border-color: #0f3dc2 !important;
	}

	.el-checkbox__input.is-checked+.el-checkbox__label {
		color: #0f3dc2;
	}

	.forgetPwd {
		font-size: 14px;
		margin: 0px 0px 25px 0px;
		float: right;
		color: #0f3dc2;
	}

	.selectContainer {
		width: 40%;
		// height: 100%;
		background-color: #fff;
		border-radius: 0 1% 1% 0;
	}

	::v-deep .el-carousel__indicators--outside {
		position: absolute;
		bottom: 100px;
		text-align: right;
		right: 120px;
	}

	::v-deep .el-carousel__indicator.is-active {
		// background: #AD201C;
		// border-radius: 3px;
	}

	::v-deep .el-carousel__button {}

	.backLogin {
		font-size: 16px;
		color: #606266;
		height: 50px;
		line-height: 50px;
		cursor: pointer;
		padding-left: 2%;
	}

	.organization {
		height: calc(100% - 50px);
		padding: 8% 12% 0 12%;
	}

	.organization h2 {
		// font-size: calc(100vw * 32 / 1920);
		font-size: 23px;
		text-align: center;
		font-weight: bold;
		margin-bottom: 5%;
	}

	.orgBtnGroup {
		display: flex;
		flex-direction: column;
		align-items: center;
		max-height: 360px;
		overflow-y: auto;
	}

	.comBtn {
		width: 80%;
		font-size: 16px;
		position: relative;
		margin: 10px 0;
		height: 45px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
